<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>websheet Demo</title>
 
  <style>
    .hljs-ln-numbers {
      text-align: right;
      color: #7d7d7d;
      padding-right: 15px;
      border-right: 1px solid #555;
    }

    .code-container {
      position: relative;
    }

    .copy-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 4px 8px;
      background: #f0f0f0;
      border: 1px solid #ccc;
      cursor: pointer;
      border-radius: 4px;
    }

    .copy-btn:hover {
      background: #e0e0e0;
    }
  </style>
  <link href="./dist/monokai-sublime.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./dist/style.css">
</head>

<body>
  <div id='yourElement'>
  </div>

  <div class="code-container">
    <button class="copy-btn">复制</button>



    <pre><code class="language-javascript"  >
    let yourElement = document.getElementById("yourElement");
    let wsheet = new websheet('HTML', yourElement,0,0,800,400);

    /**
    * 第一步 获取激活的sheet，和已经掌握内容
    */
   let activeSheet = wsheet.ActiveSheet();
   activeSheet.SetCellValue('B2', 'leftTop');
   activeSheet.SetCellValue('C2', 'leftCenter');
   activeSheet.SetCellValue('D2', 'leftBottom');
   activeSheet.SetCellValue('B3', 'CenterTop');
   activeSheet.SetCellValue('C3', 'CenterCenter');
   activeSheet.SetCellValue('D3', 'CenterBottom');
   activeSheet.SetCellValue('B4', 'rightTop');
   activeSheet.SetCellValue('C4', 'rightCenter');
   activeSheet.SetCellValue('D4', 'rightBottom');
   /**
   * 第二步    
   */
   let leftTop = new websheet.Model.CellAlignment();
   leftTop.horizontal = 'left'; //垂直方面
   leftTop.vertical = 'top';//水平方向
   activeSheet.SetCellAlignment('B2', leftTop);

   let leftCenter = new websheet.Model.CellAlignment();
   leftCenter.horizontal = 'left';//垂直方面
   leftCenter.vertical = 'center';//水平方向
   activeSheet.SetCellAlignment(2,3,leftCenter); // 

   let leftbottom = new websheet.Model.CellAlignment();
   leftbottom.horizontal = 'left';//垂直方面
   leftbottom.vertical = 'bottom';//水平方向
   activeSheet.SetCellAlignment('D2', leftbottom); // 

   let centerTop = new websheet.Model.CellAlignment();
   centerTop.horizontal = 'center'; //垂直方面
   centerTop.vertical = 'top';//水平方向
   activeSheet.SetCellAlignment('B3', centerTop);

   let centeCenter = new websheet.Model.CellAlignment();
   centeCenter.horizontal = 'center';//垂直方面
   centeCenter.vertical = 'center';//水平方向
   activeSheet.SetCellAlignment('C3', centeCenter); // 

   let centerbottom = new websheet.Model.CellAlignment();
   centerbottom.horizontal = 'center';//垂直方面
   centerbottom.vertical = 'bottom';//水平方向
   activeSheet.SetCellAlignment('D3', centerbottom); 

   let rightTop = new websheet.Model.CellAlignment();
   rightTop.horizontal = 'right'; //垂直方面
   rightTop.vertical = 'top';//水平方向
   activeSheet.SetCellAlignment('B4', rightTop);

   let rightCenter = new websheet.Model.CellAlignment();
   rightCenter.horizontal = 'right';//垂直方面
   rightCenter.vertical = 'center';//水平方向
   activeSheet.SetCellAlignment('C4', rightCenter); 

   let rightbottom = new websheet.Model.CellAlignment();
   rightbottom.horizontal = 'right';//垂直方面
   rightbottom.vertical = 'bottom';//水平方向
   activeSheet.SetCellAlignment('D4', rightbottom); 

   //先忽略这里 这里设置行列的高度和宽度
   activeSheet.setRowHeight(4, 50);
   activeSheet.setRowHeight(2, 50);
   activeSheet.setRowHeight(3, 50);
   activeSheet.setColWidth(1, 160);
   activeSheet.setColWidth(2, 160);
   activeSheet.setColWidth(3, 160);
   activeSheet.setColWidth(4, 160);
   activeSheet.setColWidth(5, 160);
   activeSheet.setColWidth(6, 160);


   /**
    * 第三步   重新绘制表格
    */

   wsheet.BuildSheet();
   wsheet.Draw();



    </code></pre>
  </div>
  <script type="module">
    //let yourElement=document.getElementById("yourElement");
    // window.websheet.hashvalue='66b76806d3d089f20fc92217e3e116722a99c654f6538d9916b266c736ee2314';
    // window.websheet.signList=[{domian:'localhost',company:'websheet',signvalue:'1C7dwqFVAEq504alFHIN6cRkeiJuob2cnMSYhJ9cB99dgCl1xqqrywYSkivqnpPue03ySREJbLB7+B5EyxLEBMNgidLCMCmM68jSFAcJQzFQekXjQvIPMCMHR9EB3U3E'},]


    let yourElement = document.getElementById("yourElement");
    let wsheet = new websheet('HTML', yourElement, 0, 0, document.documentElement.clientWidth * 0.99, document.documentElement.clientHeight*0.6);

    /**
     * 第一步 获取激活的sheet，和已经掌握内容
     */
    let activeSheet = wsheet.ActiveSheet();
    activeSheet.SetCellValue('B2', 'leftTop');
    activeSheet.SetCellValue('C2', 'leftCenter');
    activeSheet.SetCellValue('D2', 'leftBottom');
    activeSheet.SetCellValue('B3', 'CenterTop');
    activeSheet.SetCellValue('C3', 'CenterCenter');
    activeSheet.SetCellValue('D3', 'CenterBottom');
    activeSheet.SetCellValue('B4', 'rightTop');
    activeSheet.SetCellValue('C4', 'rightCenter');
    activeSheet.SetCellValue('D4', 'rightBottom');
    /**
    * 第二步    
    */
    let leftTop = new websheet.Model.CellAlignment();
    leftTop.horizontal = 'left'; //垂直方面
    leftTop.vertical = 'top';//水平方向
    activeSheet.SetCellAlignment('B2', leftTop);

    let leftCenter = new websheet.Model.CellAlignment();
    leftCenter.horizontal = 'left';//垂直方面
    leftCenter.vertical = 'center';//水平方向
    activeSheet.SetCellAlignment(2,3,leftCenter); // 

    let leftbottom = new websheet.Model.CellAlignment();
    leftbottom.horizontal = 'left';//垂直方面
    leftbottom.vertical = 'bottom';//水平方向
    activeSheet.SetCellAlignment('D2', leftbottom); // 

    let centerTop = new websheet.Model.CellAlignment();
    centerTop.horizontal = 'center'; //垂直方面
    centerTop.vertical = 'top';//水平方向
    activeSheet.SetCellAlignment('B3', centerTop);

    let centeCenter = new websheet.Model.CellAlignment();
    centeCenter.horizontal = 'center';//垂直方面
    centeCenter.vertical = 'center';//水平方向
    activeSheet.SetCellAlignment('C3', centeCenter); // 

    let centerbottom = new websheet.Model.CellAlignment();
    centerbottom.horizontal = 'center';//垂直方面
    centerbottom.vertical = 'bottom';//水平方向
    activeSheet.SetCellAlignment('D3', centerbottom); 

    let rightTop = new websheet.Model.CellAlignment();
    rightTop.horizontal = 'right'; //垂直方面
    rightTop.vertical = 'top';//水平方向
    activeSheet.SetCellAlignment('B4', rightTop);

    let rightCenter = new websheet.Model.CellAlignment();
    rightCenter.horizontal = 'right';//垂直方面
    rightCenter.vertical = 'center';//水平方向
    activeSheet.SetCellAlignment('C4', rightCenter); 

    let rightbottom = new websheet.Model.CellAlignment();
    rightbottom.horizontal = 'right';//垂直方面
    rightbottom.vertical = 'bottom';//水平方向
    activeSheet.SetCellAlignment('D4', rightbottom); 

    //先忽略这里 这里设置行列的高度和宽度
    activeSheet.setRowHeight(4, 50);
    activeSheet.setRowHeight(2, 50);
    activeSheet.setRowHeight(3, 50);
    activeSheet.setColWidth(1, 160);
    activeSheet.setColWidth(2, 160);
    activeSheet.setColWidth(3, 160);
    activeSheet.setColWidth(4, 160);
    activeSheet.setColWidth(5, 160);
    activeSheet.setColWidth(6, 160);


    /**
     * 第三步   重新绘制表格
     */

    wsheet.BuildSheet();
    wsheet.Draw();



  </script>

  
<script src="./dist/highlight.min.js"></script>
<script src="./dist/highlightjs-line-numbers.min.js"></script>

<script>

  // 高亮代码并添加行号
  document.addEventListener('DOMContentLoaded', () => {
    hljs.highlightAll();
    // 添加行号（支持 CSS 选择器）
    hljs.initLineNumbersOnLoad();
  });



  document.querySelectorAll('.code-container').forEach(container => {
    const btn = container.querySelector('.copy-btn');
    const codeBlock = container.querySelector('code');

    btn.addEventListener('click', () => {
      // 现代浏览器 API（推荐）
      if (navigator.clipboard) {
        navigator.clipboard.writeText(codeBlock.textContent)
          .then(() => {
            btn.textContent = '已复制!';
            setTimeout(() => btn.textContent = '复制', 1500);
          });
      }
      // 兼容旧浏览器的降级方案
      else {
        const textarea = document.createElement('textarea');
        textarea.value = codeBlock.textContent;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        btn.textContent = '已复制!';
        setTimeout(() => btn.textContent = '复制', 1500);
      }
    });
  });

</script>

  <script type="text/javascript" src="./dist/websheet.umd.js"></script>
</body>

</html>